<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户消费</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap/bootstrap.min.js"></script>
    <script src="/js/jquery.hammer/hammer.min.js"></script>
    <script src="/js/bootstrap.table/bootstrap-table.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.table/bootstrap-table-zh-CN.min.js" type="text/javascript"></script>
    <script src="/js/dialog.js"></script>
    <script src="/js/comm.js" type="text/javascript"></script>

    <link href="/css/bootstrap/bootstrap.css" rel="stylesheet" />
    <link href="/css/bootstrap.table/bootstrap-table.min.css"/>
    <link href="/css/dialog.css" rel="stylesheet" />
    <link href="/css/common.css" rel="stylesheet" />
</head>
<script type="text/javascript">
    $(function () {
        //调用函数，初始化表格
        initTable();
        initInput();
        initconsumeType();//初始化充值类型
        //消费
        consumeAmount();
    })

    function consumeAmount(){
        $("#btn_add").on("click",function () {
            initInputs();

            var valueInfo = $('#mytab').bootstrapTable('getSelections');
            if(valueInfo!=null&&valueInfo!=""&&valueInfo.length>0){
                $("#clientNames").html(valueInfo[0].cilentName);
                var balanceCount = valueInfo[0].clientBalance;

                var elem = document.getElementById('addEditForm');
                dialog({
                    title: "消费",
                    content: elem,
                    width: '40em',
                    okValue: "确定",
                    ok: function () {
                        if(saveCheckInfo()){
                            //判断金额
                            var consumeCounts = $("#consumeCount").val();
                            if((balanceCount-consumeCounts)<=0){
                                promptDail('用户余额不足请先充值!');
                                return false;
                            }else {
                                var dataValue = {};
                                dataValue["clientId"] = valueInfo[0].cilentId;
                                dataValue["consumeCount"] = consumeCounts;
                                dataValue["consumeType"] = $("#consumeType").val();
                                dataValue["remark"] = $("#remark").val();

                                $.post("/client/clientConsume.do",dataValue,function (data) {
                                    promptDail(data.info);
                                    initTable();
                                },"json")
                            }
                        }else {
                            return false;
                            promptDail('金额错误!');
                        }
                    },
                    cancelValue: '取消',
                    cancel: function () {}
                }).showModal();
            }else {
                promptDail('请选择一个客户!');
            }

        })
    }

    function initInputs(){
        $("#clientNames").html("");
        $("#consumeCount").val("");
        $("#remark").val("");
    }

    function initconsumeType() {
        $("#consumeType").html("");
        $.post("/system/getDictValue.do",{"dictValue":"XF"},function (data) {
            var html = "";
            if(data.type){
                var info = data.info;
                for(var i=0;i<info.length;i++){
                    var dictData = info[i];
                    html += "<option value="+dictData.dictdataValue+" >"+dictData.dictdataName+"</option>"
                }
            }
            $("#consumeType").html(html);
        },"json");

    }
    
    function initTable() {
        //先销毁表格
        $('#mytab').bootstrapTable('destroy');
        //初始化表格,动态从服务器加载数据
        $("#mytab").bootstrapTable({
            method: "post",  //使用get请求到服务器获取数据
            contentType: "application/x-www-form-urlencoded",
            url: "/client/balanceList.do", //获取数据的Servlet地址
            sidePagination: "server", //表示服务端请求
            queryParamsType:'',
            cache: false,
            striped: true,
            queryParams: function queryParams(params) {   //设置查询参数
                var param = {
                    pageNumber: params.pageNumber,
                    pageSize: params.pageSize,
                    cilentName : $("#cilentName").val(),
                    cilentId : $("#cilentId").val()
                };
                return param;
            }
        });

    }

    //失去焦点判断是否为空
    function initInput() {
        $("#consumeCount").blur(function(){  // 失去焦点
            var info = $(this).val();
            if(info!=null&&info!=""){
                $(this).next().hide();
            }else {
                $(this).next().show();
            }

        });
    }

    //判断是否为空
    function saveCheckInfo(){
        var b = true;
        var consumeCount = $("#consumeCount").val();
        if(consumeCount!=null&&consumeCount!=""&&consumeCount>0){
            $("#consumeCount").next().hide();
        }else {
            $("#consumeCount").next().show();
            b = false;
        }

        var consumeType = $("#consumeType").val();
        if(consumeType==null||consumeType==""){
            b = false;
        }
        return b;
    }

    function clearNoNum(obj){
        obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
        obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
        obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
        obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
        if(obj.value.indexOf(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
            obj.value= parseFloat(obj.value);
        }
    }
</script>
<body style="padding:5px;">
<div class="panel panel-default" >
    <div class="panel-heading">
        查询条件
    </div>
    <div class="panel-body form-group" style="margin-bottom:0px;">
        <form id="searchForm">
            <label class=" control-label" style="float:left;text-align: left; margin-top:5px">客户名称：</label>
            <input type="text" class="form-control" style="width: 100px;float:left;" name="cilentName" id="cilentName"/>
            <label class=" control-label" style="float:left;text-align: left; margin-top:5px;margin-left: 15px;">客户id：</label>
            <input type="text" class="form-control" style="width: 100px;float:left;" name="cilentId" id="cilentId"/>

            <div class="col-sm-1" style="float:left;">
                <button class="btn btn-primary" id="search_btn" onclick="initTable();return false;">查询</button>
            </div>
        </form>
    </div>
</div>
<div id="toolbar" class="btn-group pull-right"  style="margin: 0px 0px 5px 0px;">
    <button id="btn_add" type="button" class="btn btn-default btn-purview">
        <span class="glyphicon glyphicon-plus" ></span>消费
    </button>
</div>
<table id="mytab" data-toggle="table" class="table table-hover table-bordered" data-single-select="true"
       data-toolbar-align="right" data-toolbar="#toolbar" data-pagination="true"  data-page-size="5" data-striped="true"
       data-page-list="[5,10,20,30]" data-pagination-h-align="right" data-pagination-detail-h-align="left"
       data-pagination-loop="false" data-click-to-select="true" >
    <colgroup>
        <col style="width: 3%">
        <col style="width: 7%">
        <col style="width: 5%">
        <col style="width: 20%">
        <col style="width: 10%">
        <col style="width: 15%">
        <col style="width: 20%">
        <col style="width: 20%">
    </colgroup>
    <thead>
    <tr >
        <th data-align="center" data-valign="middle" data-checkbox="true" ></th>
        <th data-align="center" data-valign="middle" data-field="cilentId">客户id</th>
        <th data-align="center" data-valign="middle" data-field="cilentName">客户名称</th>
        <th data-align="center" data-valign="middle" data-field="clientPhone">客户电话</th>
        <th data-align="center" data-valign="middle" data-field="clientBalance">客户余额(元)</th>
        <th data-align="center" data-valign="middle" data-field="clientRecharge">充值总额(元)</th>
        <th data-align="center" data-valign="middle" data-field="clientConsume">消费总额(元)</th>
        <th data-align="center" data-valign="middle" data-field="addDate">添加时间</th>
    </tr>
    </thead>
</table>

<div id="addEditForm" style="display: none;">
    <div style="width: 100%;margin-top: 10px;height: 220px;overflow-x: hidden;overflow-y: auto;">
        <form class="form-horizontal" id="nodeForm" role="form">
        <div class="form-group">
            <label class="col-sm-3 control-label">客户名称:</label>
            <div class="col-sm-8">
                <p class="help-block" id="clientNames"></p>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">消费金额(元)<span style="color: red;">*</span>:</label>
            <div class="col-sm-8">
                <input type="text" class="form-control" style="width: 80%" id="consumeCount" name="consumeCount"  placeholder="请输入金额"
                       onkeyup="clearNoNum(this)" onafterpaste="clearNoNum(this)"
                />
                <span class="help-block" style="color: red; display: none;">请输入正确金额</span>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">消费类型<span style="color: red;">*</span>:</label>
            <div class="col-sm-8">
                <select class="form-control" id="consumeType" name="consumeType" style="width: 50%">
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">备注:</label>
            <div class="col-sm-8">
                <textarea class="form-control" style="width: 80%" id="remark" name="remark"  ></textarea>
            </div>
        </div>
    </form>
    </div>
</div>
</body>
</html>